<template>
  <!-- 头部 -->
  <div class="header">
    <div class="header-left">
      <img class="logo" src="@/assets/images/logo.png" alt="logo" />
      <!-- <div class="time"></div> -->
    </div>
    <h1 class="header-center">屏多（上海）科技有限公司</h1>
    <div class="header-right">
      <!-- <el-icon class="icon" @click="onHome">
        <HomeFilled />
      </el-icon>
      <el-icon class="icon" @click="onToggle">
        <FullScreen />
      </el-icon> -->
      <div class="time">{{ currentTimeYMD }} {{ currentTimeHS }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
// import screenfull from 'screenfull';
// import { FullScreen, User, HomeFilled } from '@element-plus/icons-vue';

// 更新时间函数
const currentTimeHS = ref(dayjs().format('HH:mm:ss'))
const currentTimeYMD = ref(dayjs().format('YYYY/MM/DD'))
let timer = null
const updateTime = () => {
  currentTimeHS.value = dayjs().format('HH:mm:ss')
  currentTimeYMD.value = dayjs().format('YYYY/MM/DD')
}

// 切换事件
// const onToggle = () => {
//   if (screenfull.isEnabled) {
//     screenfull.toggle();
//   }
// };
// 回到初始视角
const onHome = () => {
  __g.camera.set([566338.221682, 2827162.474375, 451902, -55.140232, -91.26683, 0.000015])
}

// 是否全屏
const isFullscreen = ref(false)

// 监听变化
const change = () => {
  if (screenfull.isEnabled) {
    isFullscreen.value = screenfull.isFullscreen
  }
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)

  // 监听全屏变化
  // if (screenfull.isEnabled) {
  //   screenfull.on('change', change)
  // }
})
onUnmounted(() => {
  // 清除时间定时器
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>

<style scoped lang="scss">
/* 头部 */
.header {
  pointer-events: auto;

  .header-right {
    position: absolute;
    top: 3%;
    right: 1%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    width: 12vw;

    .time {
      font-size: 1.25vw;
      color: #c9efff;
      font-family: digital, serif;
    }
  }

  .header-center {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.458vw;
    font-family: DOUYU, serif;
    color: #fff;
    letter-spacing: 0.3vw;
  }

  .header-left {
    position: absolute;
    top: 3%;
    left: 2%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 0.6vw;

    .icon {
      font-size: 1.25vw;
      color: #c9efff;
      cursor: pointer;
    }

    .logo {
      width: 14.5vw;
      height: 2.5vw;
    }
  }
}
</style>
